<template>
    <div class="form-opts">
        <el-autocomplete
          v-if="items.type === 'autocomplete'"
          class="inline-input"
          v-model="inResult"
          clearable
          :fetch-suggestions="querySearch"
          :placeholder="items.placeholder"
          @change="resChange"
          @select="autoCompleteSelect"
        ></el-autocomplete>

        <el-date-picker
            v-if="items.type === 'datePicker'"
            class="opts-date"
            v-model="inResult"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="-"
            :placeholder="items.placeholder"
            @change="resChange"
            :disabled="items.disabled"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <el-date-picker
            v-if="items.type === 'datetime'"
            v-model="inResult"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            :placeholder="items.placeholder"
            @change="resChange"
            :disabled="items.disabled"
            default-time="00:00:00">
        </el-date-picker>
        <el-date-picker
            v-if="items.type === 'date'"
            class="opts-date"
            v-model="inResult"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="-"
            :placeholder="items.placeholder"
            @change="resChange"
            :disabled="items.disabled"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <el-select
          v-if="items.type === 'dictCreate'"
          class="opts-select"
          v-model="inResult"
          @change="resChange"
          :multiple="items.multiple"
          clearable
          filterable
          allow-create
          :defaultFirstOption="true"
          :disabled="items.disabled"
          :placeholder="items.placeholder"
        >
          <el-option
            v-for="item in items.options"
            :key="item.code"
            :label="item.name"
            :value="item.code">
          </el-option>
        </el-select>
        <el-select
            v-if="items.type === 'dict'"
            class="opts-select"
            v-model="inResult"
            @change="resChange"
            :multiple="items.multiple"
            clearable
            filterable
            :disabled="items.disabled"
            :placeholder="items.placeholder"
            :class="[(items.height ? 'opts-height' : null)]"
        >
            <el-option
                v-for="item in items.options"
                :key="item.code"
                :label="item.name"
                :value="item.code">
            </el-option>
        </el-select>
        <el-input
            v-if="items.type === 'text'"
            class="opts-input"
            :placeholder="items.placeholder"
            :show-password="items.password"
            v-model="inResult"
            @change="resChange"
            :disabled="items.disabled"
            clearable
        >
        </el-input>
      <el-input-number
        v-if="items.type === 'number'"
        v-model="inResult"
        @change="resChange"
        :min="1"
        :label="items.placeholder"
      >

      </el-input-number>
        <el-input
            v-if="items.type === 'textArea'"
            class="opts-textarea"
            type="textarea"
            :placeholder="items.placeholder"
            v-model="inResult"
            :maxlength="items.maxlength"
            :show-word-limit="true"
            :rows="items.rows"
            @change="resChange"
            :disabled="items.disabled"
            clearable
        >
        </el-input>
        <el-upload
            v-if="items.type === 'imgFile'"
            class="opts-upload"
            action="321"
            :before-upload="imguploadChange"
            :show-file-list="false"
        >
            <div style="width: 60%; height: 100%; display: flex; justify-content: center;align-items: center">
                <i v-show="!imgUrl" class="el-icon-plus"></i>
                <img v-show="imgUrl" :src="imgUrl" alt="">
            </div>
        </el-upload>
        <el-upload
            v-if="items.type === 'file'"
            class="opts-file-upload"
            action="321"
            :before-upload="fileuploadChange"
            :show-file-list="false"
        >
            <div style="width: 100%; height: 100%; display: flex; justify-content: center;align-items: center">
              <el-button type="primary" size="mini">上传</el-button>&nbsp;{{fileName}}
            </div>
        </el-upload>

    </div>
</template>

<script>
import api from '@/api/common.api'
export default {
    props: {
        outResult: {
            default: ""
        },
        items: {
            default: {}
        }
    },
    model: {
        prop: "outResult",
        event: "changeResult"
    },
    components: {},
    data() {
        return {
          fileName: '',
          imgUrl: '',
          inResult: ""
        }
    },
    computed: {},
    created(){
        if(this.items.value){
            this.inResult= this.items.value
            this.$emit("changeResult", this.inResult)
            if(this.items.type === 'file'){
                this.imgUrl = this.items.value
            }
        }

    },
    mounted() {

    },
    methods: {
      autoCompleteSelect (e) {
        const value = e.value
        this.inResult = value
        this.resChange(value)
      },
      querySearch(queryString, cb) {
        // var restaurants = this.restaurants;
        // var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        api.post(this.items.url).then(res=>{cb(res.content)})
      },
      fileuploadChange (e) {
        this.inResult = e
        this.fileName = e.name
        this.resChange(e)
        return false
      },
      getFileUrl (obj) {
        let url;
        url = window.URL.createObjectURL(obj);
        return url;
      },

      imguploadChange (e) {
        this.inResult = e
        this.imgUrl = this.getFileUrl(e)
        this.resChange(e)
        return false
      },
      resChange(e){
        if(e===null){
            e = ["", ""]
        }
        this.$emit("changeResult", e)
      },
    },
    watch: {
        "items.value": {
            deep: true,
            handler: function(val){
              this.inResult= val
            }
        }
    }
}

</script>
<style lang='stylus'>
    .form-opts{
        display: inline-block;
    }
    .el-autocomplete-suggestion li{
      color: #fff!important;
    }
    .el-select-dropdown__item.selected, .el-autocomplete-suggestion li.highlighted, .el-autocomplete-suggestion li:hover{
        background-color: #0d3349!important;
        color: #fff;
    }
    .opts-upload, opts-file-upload{
        width: 230px!important;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-upload{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .opts-select{
        width: 230px!important;
        .el-tag.el-tag--info{
            background: #0d3349!important;
        }
        .el-input__inner{
            background: #143A5E;
            border: 1px;
            border-radius: 0;
            color: #EAF5FF;
        }
    }
    .opts-height{
      height: 100px;
      .el-input__inner{
        height: 100px;
        text-overflow: unset!important;
        word-break: unset!important;
      }
    }
    .opts-input{
        width: 230px!important;
        .el-input__inner{
            height: 30px;
            background: #143A5E;
            border-radius: 0;
            border: 1px solid #EAF5FF;
            color: #EAF5FF;
        }
    }
    .opts-textarea{
        width: 230px!important;
        .el-textarea__inner{
            background: #143A5E;
            border-radius: 0;
            border: none;
            color: #EAF5FF;
        }
    }
    .opts-date, .el-date-editor{
        background: #143A5E;
        border-radius: 0!important;
        border: none!important;
        color: #EAF5FF!important;
        width: 230px!important;
        .el-range-input, .el-input__inner{
            background: transparent;
            color: #EAF5FF!important;
            border-radius: 0!important;
            border: 1px!important;
        }
    }
    .el-date-editor, .el-autocomplete, .el-input .el-input__inner, .opts-textarea .el-textarea__inner, .el-input.is-disabled .el-input__inner, .opts-upload{
        background: transparent!important;
        box-shadow: 0px 0px 12px 1px rgba(95, 136, 251, 0.38) inset!important;
    }
    .el-autocomplete{
      width: 230px!important;
      .el-input__inner{
        color: #fff;
        border: 1px;
      }

    }
    .el-input-number{
      width: 230px!important;
      .el-input-number__decrease, .el-input-number__increase{
        background: #06244b;
        color: #fff;
      }
      .el-input__inner{
        color: #fff;
      }
    }
</style>
